<template>
	<view class="tui-container">
		<view class="tui-searchbox flex justify-between">
			<text class="text-white font flex-shrink mr-2">首页</text>
			<view class="tui-search-input">
				<icon type="search" :size='13' color='#666' style="padding-top: 20rpx;"></icon>
				<input confirm-type="search" placeholder="请输入关键词" v-model="kw" @confirm="search()"  placeholder-class="tui-input-plholder"
				 class="tui-input" style="width: 80%;float: right;padding-top: 10rpx;"/>
			</view>
			<view class="flex-shrink text-center ml-2" @tap="detail('../news/news?id=3')">
				<tui-icon class="mr-0" name="message" style="margin-right: 0;" :size='26' color='#fff'></tui-icon>
				<!-- <view class="text-white font-smaller">消息</view> -->
			</view>
		</view>
		<view class="bg-linger">
			<!-- 轮播图 -->
			<swiper indicator-dots autoplay circular :interval="5000" :duration="150" indicator-color="rgba(255, 255, 255, 0.9)"
			 indicator-active-color="#ff791f" class="tui-banner-swiper">
				<swiper-item v-for="(item,index) in banner" :key="index" @tap.stop="detail(item.url)">
					<view class="tui-banner-title">{{item.title}}</view>
					<image :src="item.image" class="tui-slide-image" mode="aspectFill"/>
				</swiper-item>
			</swiper>
			<!-- 金刚区 -->			
			<view class="jingang">
				<view v-for="(item,i) in menu" :key="i" style="display: inline-block;width: calc(100%/4);">
					<view style="width:100%;text-align: center;" @click="detail(item.href)">
						<image :src="item.icon" style="width: 120rpx;
    height: 90rpx;"></image>
					</view>
					<text class="tui-grid-label">{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<!-- 广告区 -->
		<view class="index-ad" @click="coupon(1)">
			<swiper :indicator-dots="false" autoplay :interval="5000" :duration="150" style="height:160rpx;width:100%;">
				<swiper-item>
					<view class="ad-item">
						<image src="/static/jifen.png" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 最新消息 -->
		<view class='tui-notice-board'>
			<view class="tui-icon-bg">
				<tui-icon name="news-fill" :size='24' color='#f54f46'></tui-icon>
			</view>
			<view class="tui-scorll-view">
				<view class="tui-notice" :class="[animation?'tui-animation':'']">{{noticeMsg}}</view>
			</view>
		</view>
		
		<!-- 每日爆款 -->
		<view class="day-bao px-2">
			<view class="day-bao-title flex mb-2">
				<view class="timedead">
					<view class="font flex" style="padding: 10rpx 0;">
						<text class="font-weight-bold mr-1">今日热点</text><tui-countdown :time="dayBao[0].activitytimestr" color="#fff" borderColor="#e41f19" backgroundColor="#e41f19" colonColor="#e41f19"></tui-countdown>
					</view>
					<view class="font-sm text-danger">
						每天5场低至1折
					</view>
				</view>
				<view class="morego flex justify-between">
					<view class="">
						<view class="font font-weight-bold" style="padding: 10rpx 0;">
							热门活动
						</view>
						<view class="font-sm text-danger">
							强烈推荐的活动
						</view>
					</view>
					<text class="text-danger px-2 font border rounded gomore" @tap="list()" style="margin-top:10rpx">GO ></text>
				</view>
			</view>
			<view class="day-bao-goods flex">
				<view class="day-bao-goods-item" @click="goodsDetail(dayBao[0])">
					<image class="one" :src="dayBao[0].thumbnail" mode="aspectFill"></image>
				</view>
				<view class="day-bao-goods-item mr-0">
					<image :src="dayBao[1].thumbnail" mode="aspectFill" @click="goodsDetail(dayBao[1])"></image>
					<image :src="dayBao[2].thumbnail" mode="aspectFill" @click="goodsDetail(dayBao[2])"></image>
				</view>
			</view>
		</view>
		
		
		<!-- 今日优选 -->
		<view class="youxuan-title flex justify-between p-2" style="position: relative;">
			<text class="font-md" style="font-weight: 600;">为你推荐</text> 
		</view>


		<view class="tui-product-box">
			<view class="tui-product-list">
				<view class="tui-product-container">
					<block v-for="(item,index) in dayGoods" :key="index" v-if="(index+1)%2!=0">
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="goodsDetail(item)">
							<image :src="item.thumbnail" class="tui-pro-img"  mode="widthFix"/>
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{item.title}}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price">￥{{item.price}}</text>
										<text class="tui-factory-price">立即下单</text>
									</view>
								</view>
							</view>
						</view>
						<!--商品列表-->
					</block>
				</view>
				<view class="tui-product-container">
					<block v-for="(item,index) in dayGoods" :key="index" v-if="(index+1)%2==0">
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="goodsDetail(item)">
							<image :src="item.thumbnail" class="tui-pro-img" mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{item.title}}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price">￥{{item.price}}</text>
										<text class="tui-factory-price">立即下单</text>
									</view>
								</view>
							</view>
						</view>
						<!--商品列表-->
					</block>
				</view>
			</view>
		</view>
		
		<!--加载loadding-->
		<tui-loadmore :visible="goodsList[currentTab].loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore :visible="!goodsList[currentTab].pullUpOn"></tui-nomore>
		
		<view class="tui-tabbar">
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tui-tabbar-item" :class="[current==index?'tui-item-active':'']" :data-index="index" @tap="tabbarSwitch">
					<view :class="[index==0?'tui-ptop-4':'']">
						<image :src="item.images" mode="" style="width:60rpx;height:60rpx"></image>
					</view>
					<view class="tui-scale">{{item.text}}</view>
				</view>
			</block>
		</view>
	</view>
	
</template>

<script>
	var api = require('@/common/api.js')
	const QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
	import tuiIcon from "@/components/icon/icon"
	import tuiGrid from "@/components/grid/grid"
	import tuiTabs from "@/components/tui-tabs/tui-tabs"
	import tuiCountDown from "@/components/countdown/countdown"
	import tuiLoadmore from "@/components/loadmore/loadmore"
	import tuiNomore from "@/components/nomore/nomore"
	import tuiSticky from "@/components/tui-sticky/tui-sticky"
	export default {
		onShareAppMessage(res) {
			
			return {
			  title: '伴宠游',
			  path: '/pages/index/index?tjr='+uni.getStorageSync("user").id
			}
		},
		onShareTimeline(res) {//分享到朋友圈
		    return {
		      title: '伴宠游',
		      path: '/pages/index/index?tjr='+uni.getStorageSync("user").id
		    }
		},
		components: {
			tuiIcon,
			tuiGrid,
			tuiCountDown,
			tuiTabs,
			tuiLoadmore,
			tuiNomore,
			tuiSticky,
		},
		data() {
			return {
				banner: [],
				dataList: [],
				menu:[
					{
					name:"跟团游"	,
					icon:"/static/tab-1.png",
					href:"/pages/product/product",
					},
					{
					name:"自由行"	,
					icon:"/static/tab-2.png",
					href:"/pages/hotel/hotel",
					},
					{
					name:"会员中心"	,
					icon:"/static/tab-3.png",
					href:"/pages/mall-extend/my/my",
					},
					{
					name:"专宠专线"	,
					icon:"/static/tab-4.png",
					href:"/pages/pets/pets",
					}
					
				],
				recommend:[],
				hot:[],
				tabbar: [{
					text: "首页",
					images:"/static/images/lv/5.png"
				}, {
					text: "积分领取",
					images:"/static/images/lv/6.png"
				}, {
					text: "热门活动",
					images:"/static/images/lv/7.png"
				}, {
					text: "我的",
					images:"/static/images/lv/8.png"
				}],
				current:0,
				newsList: [],
				animation: false,
				kw:'',
				navbar: [{},{},{},{},{}],
				currentTab: 0,
				pullUpOn:true,
				noticeMsg:"",
				countdown:0,
				dayBao:[],//每日爆款
				cheapBao:[],//便宜爆款
				dayGoods:[],//今日优选
				goodsList:[],
				scrollTop: 0,
				params:[],
			}
		},
		//页面滚动执行方式
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(options) {
			console.log(options);
			if(options.tjr){
				uni.setStorageSync('father',options.tjr)
			};

			this.news();
			api.get({
				url:'order/index/index',
				success: res => {
					this.banner = res.data;
				}
			});
			
			api.get({
				url:'order/product',
				success: res => {
					console.log(res.data);
					this.dayBao = res.data;
				}
			});
			
			api.get({
				url:'order/productlist',
				success: res => {
					console.log(res.data);
					this.dayGoods = res.data;
				}
			});
			


		},
		methods: {
			news:function(){
				api.get({
					url:'order/new',
					data:{id:2},
					success: res => {

						this.noticeMsg = res.data[0].post.post_title;
					}
				})
				setTimeout(() => {
					this.animation = true
				}, 600)
			},

			getGoodsList:function(){
				let data = this.goodsList[this.currentTab];
				if(!data.pullUpOn) return false;
				api.get({
					url:"mall/item",
					data:{
						category_id:this.navbar[this.currentTab].id,
						page:this.goodsList[this.currentTab].pageIndex+',10'
					},
					success:res=>{
						data.loadding = false;
						if(res.data.length < 10){
							data.pullUpOn = false;
						}
						data.data = data.data.concat(res.data)
						data.pageIndex++;
						console.log('商品数据',this.goodsList);
					}
				})
			},
			change(e) {
				this.currentTab = e.index
				if(this.goodsList[this.currentTab].data.length == 0){
					this.getGoodsList()
				}
			},
			detail:function(url){

				uni.navigateTo({
					url:url
				})
			},
			list:function(){
			
				uni.navigateTo({
					url:"/pages/mall/mall"
				})
			},
			
			goodsDetail(item){
				uni.navigateTo({
					url:"/pages/mall-extend/goodsDetail/goodsDetail?user_id="+uni.getStorageSync("user").id+"&id="+item.id
				})
			},
			tabbarSwitch: function(e) {
				let index = e.currentTarget.dataset.index;
				this.current = index;
				if (index != 0) {
					if (index == 1) {
						uni.redirectTo({
							url: '/pages/download/download'
						})
					} else if (index == 2) {
						uni.redirectTo({
							url: '/pages/mall/mall'
						})
					} else if(index == 3){
						uni.redirectTo({
							url: '/pages/mall-extend/my/my'
						})
					}
				}
			},
			//搜索
			search(){
				uni.navigateTo({
					url:"/pages/search/search?kw="+this.kw
				})
			},
			coupon(e){
				uni.navigateTo({
					url:"/pages/coupon/coupon?type="+e
				})
			}
			
		},

	}
</script>

<style>
	.jingang{
		width: 96%;
		margin: 0 2%;
	}
	/* 每日爆款 */
	.timedead , .morego {
		width:50%
	}
	.day-bao-goods-item {
		width:49%;
		margin-right: 2%;
	}
	.day-bao-goods-item image {
		width: 100%;
		height: 268rpx;
	}
	.day-bao-goods-item image.one {
		height:540rpx
	}
	.gomore {
		height: 30px;
		line-height: 30px;
		border-radius: 30px;
		background: #fff;
	}
	/* 便宜爆款 */
	.cheap-bao-title {background: #ffe8da;color: #ff9880;}
	.cheap-bao-title .l image {width:40rpx}
	.cheap-bao-title>image {width: 180rpx;}
	/* 消息滚动 */
	.tui-notice-board {
		width: 94%;
		margin: 20rpx 3%;
		border-radius: 30rpx;
		padding-right:20rpx;
		padding-left:20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		height: 60rpx;
		background: #fff8d5;
		display: flex;
		align-items: center;
	}
	
	.tui-icon-bg {
		background: #fff8d5;
		position: relative;
		z-index: 10;
	}
	
	.tui-icon-class {
		margin-right: 12rpx;
	}
	
	.tui-scorll-view {
		flex: 1;
		line-height: 1;
		white-space: nowrap;
		overflow: hidden;
		color: #f54f46;
	}
	
	.tui-notice {
		transform: translateX(100%);
	}
	
	.tui-animation {
		-webkit-animation: tui-rolling 12s linear infinite;
		animation: tui-rolling 12s linear infinite;
	}
	

	.movies .info {
		display: -webkit-box;
		
		overflow: hidden;
		
		text-overflow: ellipsis;
		
		word-wrap: break-word;
		
		white-space: normal !important;
		
		-webkit-line-clamp: 2;
		
		-webkit-box-orient: vertical;
	}
	.index-ad {
		display: flex;
	}
	.ad-item {
		width: 96%;
		padding: 10rpx;
	}
	.index-ad image {
		width: 100%;
		border-radius: 10rpx;
	}
	.movies {
		display: flex;
		margin-top: 10upx;
		padding: 0 10upx;
	}
	.movies-item {
		width: 33.3%;
	}
	.movies-item:nth-of-type(3){
		margin-right: 0;
	}
	.movies-item .thumb{
		width: 220upx;
		height: 220upx;
		margin: 0 auto;
		display: block;
		object-fit: cover;
	}
	
	.movies-item .thumb image {
		border-radius: 10upx;
		width: 220upx;
		height: 260upx;
	}
	.movies .price {
		display: flex;
		vertical-align: bottom;
		margin-top: 12upx;
		color: #666;
	}
	.movies .price > text{
		margin-top: 8upx;
		margin-left: 6upx;
		font-size: 24upx;
	}
	.movies .money {
		color: #f83393;
	}
	
	.movies .money text {
		font-size: 34upx;
	}
	page {
		color: #333;
		background: #f5f5f5;

	}
	.tui-grid-4 {
		padding: 20upx 10upx !important;
	}
	.tui-grids::after {
		content:none !important;
	}
	.tui-grid::before , .tui-grid::after {
		content:none !important;
	}
	.tui-container {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-bottom: 100rpx;
	}
	
	.tui-searchbox {
		padding: 30upx 0;
		box-sizing: border-box;
		_display: flex;
		align-items: center;
		background: #ffcc00;
	}
	
	.tui-search-input {
		width: 100%;
		height: 66upx;
		border-radius: 40upx;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #f2f2f2;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}
	
	.tui-search-input image {
		height: 66upx;
		width: 160upx;
	}
	
	.tui-input {
		flex: 1;
		color: #333;
		padding: 0 16upx;
		font-size: 28upx;
	}
	
	.tui-input-plholder {
		font-size: 28upx;
		color: #b2b2b2;
	}
	
	.tui-cancle {
		color: #888;
		font-size: 28upx;
		padding-left: 30upx;
		flex-shrink: 0;
	}
	
	.tui-history-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30upx 0;
	}
	
	.tui-icon-delete {
		padding: 10upx;
	}
	
	.tui-search-title {
		font-size: 28upx;
		font-weight: bold;
	}
	
	.tui-banner-swiper {
		width: 96%;
		margin: 20rpx 2% 20rpx;
		border-radius: 20rpx;
		height: 350rpx;
		position: relative;
	}
	
	.tui-slide-image {
		width: 100%;
		height: 350rpx;
		border-radius: 20rpx;
		display: block;
	}
	.tui-grid-icon {
		width:80rpx !important;
		height: 80rpx !important;
	}
	.icon0001 image {
		width:80rpx !important;
		height:80rpx;
	}
	.tui-banner-title {
		width: 100%;
		height: 80rpx;
		position: absolute;
		z-index: 9999;
		color: #fff;
		bottom: 0;
		padding: 0 30rpx;
		padding-top: 25rpx;
		font-size: 28rpx;
		font-weight: bold;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		border-radius: 20rpx;
	}

	.tui-banner-swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
		width: 100%;
		top: 280rpx;
		text-align: right;
		padding-right: 30rpx;
		box-sizing: border-box;
	}
	
	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}
	
	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 8rpx;
	}
	
	.tui-banner-swiper .wx-swiper-dot-active::before {
		background: #5677fc;
	}
	
	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 18rpx;
	}
	
	.tui-grid-icon {
		width: 64upx;
		height: 64upx;
		margin: 0 auto;
		text-align: center;
		vertical-align: middle;
	}
	.tui-grid-icon image {
		width: 100%;
		border-radius: 100%;
	}
	.tui-grid-label {
		display: block;
		text-align: center;
		font-weight: 400;
		color: #333;
		font-size: 28upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 10upx;
	}
	.tui-list-view {
		padding-top: 10upx !important
	}
	
	.tui-list-cell-name {
		padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}
	
	.tui-list::after {
		left: 94upx !important
	}
	
	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}
	
	.logo {
		height: 40upx;
		width: 40upx;
	}
	
	.tui-flex {
		display: flex;
		align-items: center;
	}
	
	.tui-msg-box {
		display: flex;
		align-items: center;
	}
	
	.tui-msg-pic {
		width: 140upx;
		height: 160upx;
		border-radius: 10upx;
		display: block;
		margin-right: 24upx;
	}
	
	.tui-msg-item {
		max-width: 500upx;
		min-height: 80upx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tui-msg-name {
		white-space: normal;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 1.4;
		color: #262b3a;
		-webkit-line-clamp: 2;
		overflow: hidden;
		-webkit-box-orient: vertical;
		display: -webkit-box;
	}
	
	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26upx;
		line-height: 1;
		color: #9397a4;
	}
	
	.tui-msg-content .time {
		margin:16upx 0;
	}
	.tui-msg-content .price {
		display: flex;
		vertical-align: bottom;
		margin-top: 12upx;
	}
	.tui-msg-content .price > text{
		margin-top: 8upx;
		margin-left: 6upx;
	}
	.tui-msg-content .money {
		color: #f83393;
	}
	
	.tui-msg-content .money text {
		font-size: 34upx;
	}
	.tui-msg-right {
		max-width: 120upx;
		height: 88upx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.tui-msg-right.tui-right-dot {
		height: 76upx;
		padding-bottom: 10upx;
	
	}
	
	.tui-msg-time {
		width: 100%;
		font-size: 24upx;
		line-height: 24upx;
		color: #9397a4;
	}
	
	.tui-badge {
		width: auto
	}
	
	.tui-msg::after {
		left: 154upx !important
	}
	
	/*tabbar*/
	
	.tui-tabbar {
		width: 100%;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99999;
		background: #fff;
		height: 125rpx;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}
	
	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	
	.tui-tabbar-item {
		flex: 1;
		width: 25%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		font-size: 24rpx;
		color: #848484;
		height: 80rpx;
	}
	.tui-tabbar-item .tui-icon-class {
		margin-right: 0;
	}
	
	.tui-ptop-4 {
		padding-top: 4rpx;
	}
	
	.tui-scale {
		font-weight: bold;
		transform: scale(0.8);
		transform-origin: center 100%;
		line-height: 30rpx;
	}
	
	.tui-item-active {
		color: #f28e26 !important;
	}
	
	/*tabbar*/
	
	.tui-notice {
		transform: translateX(100%);
	}
	
	.tui-animation {
		-webkit-animation: tui-rolling 12s linear infinite;
		animation: tui-rolling 12s linear infinite;
	}
	
	@-webkit-keyframes tui-rolling {
		0% {
			transform: translateX(100%);
		}
	
		100% {
			transform: translateX(-170%);
		}
	}
	
	@keyframes tui-rolling {
		0% {
			transform: translateX(100%);
		}
	
		100% {
			transform: translateX(-170%);
		}
	}
	
	.tui-subject {
		padding: 100upx 30upx 30upx 30upx;
		box-sizing: border-box;
		font-size: 32upx;
		font-weight: bold;
	}
	
	.tui-rolling-news {
		width: 100%;
		padding: 12upx 30upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
	}
	
	.tui-swiper {
		font-size: 28upx;
		height: 50upx;
		flex: 1;
	}
	
	.tui-swiper-item {
		display: flex;
		align-items: center
	}
	
	.tui-news-item {
		line-height: 28upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tui-searchbox {
		padding: 10upx 30upx 30upx;
		box-sizing: border-box;
	}
	
	.top-info {
		margin-top: 20upx;
		color: #fff;
		font-size: 28upx;
	}
	
	.tui-rolling-search {
		width: 100%;
		height: 70upx;
		border-radius: 35upx;
		padding: 0 40upx 0 30upx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		color: #999;
	}
	/* 商品列表 */
	.tui-product-box {
		margin-top: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	
	.tui-pb-20 {
		padding-bottom: 20rpx;
	}
	
	.tui-bg-white {
		background: #fff;
	}
	
	.tui-group-name {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		padding: 24rpx 0;
	}
	
	.tui-activity-box {
		display: flex;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.tui-activity-img {
		width: 50%;
		display: block;
	}
	
	.tui-new-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.tui-new-item {
		width: 49%;
		height: 200rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #f5f2f9;
		position: relative;
		border-radius: 12rpx;
	}
	
	.tui-new-mtop {
		margin-top: 2%;
	}
	
	.tui-title-box {
		font-size: 24rpx;
	}
	
	.tui-new-title {
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.tui-new-price {
		padding-top: 18rpx;
	}
	
	.tui-new-present {
		color: #ff201f;
		font-weight: bold;
	}
	
	.tui-new-original {
		display: block;
		color: #a0a0a0;
		text-decoration: line-through;
		font-size: 20rpx;
	}
	
	.tui-new-img {
		width: 160rpx;
		height: 160rpx;
		display: block;
		flex-shrink: 0;
	}
	
	.tui-new-label {
		width: 56rpx;
		height: 56rpx;
		border-top-left-radius: 12rpx;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding-top: 20rpx; */
	}
	
	.tui-product-container {
		flex: 1;
		margin-right: 2%;
	}
	
	.tui-product-container:last-child {
		margin-right: 0;
	}
	
	.tui-pro-item {
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.tui-pro-img {
		width: 100%;
		height:300rpx;
		display: block;
	}
	
	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}
	
	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.tui-pro-price {
		padding-top: 18rpx;
	}
	
	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}
	
	.tui-factory-price {
		font-size: 24rpx;
		color: #fff;
		background-color: #f2892c;
		border-radius: 50rpx;
		padding: 6rpx 20rpx;
		margin-left: 10rpx;
	}
	
	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}
</style>
